<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VUE生命周期管理函数[钩子]</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>

    <div id="app">
        <!-- 手动执行DOM并触发函数的执行 -->
        <!-- const app= Vue.createApp({ 
            data() {
                return {
    
                    message: "唯爱薇o朝圣之路！"
                }
            },
            methods: {
                manualExecute() {
                    alert("edu_vlovev_cn")
                }
            },
            template:`
    
                <h2 v-on:click="manualExecute"> {{ message }} </h2>
            `
    
        }
        ).mount("#app")         -->

        <!-- 手动执行DOM并触发函数的执行与自动执行函数对比 -->
        <!-- const app= Vue.createApp({ 
            data() {
                return {
    
                    message: "唯爱薇o朝圣之路！"
                }
            },
            methods: {
                manualExecute() {
                    alert("manualExecute ：edu_vlovev_cn 手动弹窗显示")
                }
            },
            mounted(){
                alert('autoExecute 自动弹窗显示')
            },
            template:`
    
                <h2 v-on:click="manualExecute"> 手动点击：{{ message }} </h2>
            `
    
        }
        ).mount("#app") -->


    </div>
    

</body>
<script>
    const app= Vue.createApp({ 
        data() {
            return {

                message: "edu.vlovev.cn"
            }
        },
        methods: {
            manualExecute() {
                alert("manualExecute ：edu_vlovev_cn 手动弹窗显示")
            },
            updateMessage() {
                this.message = this.message == 'edu.vlovev.cn' ? "唯爱薇o朝圣之路" : "edu.vlovev.cn"
            }
        },
        beforeCreate() {
            alert("autoExecute 自动弹窗显示: 在实例生成之前会自动执行的函数beforeCreate")
            console.log("autoExecute 自动弹窗显示: 在实例生成之前会自动执行的函数beforeCreate")
        },
        created() {
            alert("autoExecute 自动弹窗显示: 在实例生成之后会自动执行的函数created")
            console.log("autoExecute 自动弹窗显示: 在实例生成之后会自动执行的函数created")
        },
        beforeMount() {
            alert("autoExecute 自动弹窗显示: 在模板渲染完成之前执行的函数beforeMount")
            console.log("autoExecute 自动弹窗显示: 在模板渲染完成之前执行的函数beforeMount")
        },
        mounted(){
            alert('autoExecute 自动弹窗显示: 在模板渲染完成之后执行的函数mounted')
            console.log('autoExecute 自动弹窗显示: 在模板渲染完成之后执行的函数mounted')
        },
        beforeUpdate(){
            alert('autoExecute 自动弹窗显示: 当data中的数据变化时,会立即自动执行的函数beforeUpdate')
            console.log('autoExecute 自动弹窗显示: 当data中的数据变化时,会立即自动执行的函数beforeUpdate')
            console.log(document.getElementById('app').innerHTML)

        },
        updated(){
            alert('autoExecute 自动弹窗显示: 当data中的数据发生变化，页面重新渲染完后，会自动执行的函数updated')
            console.log('autoExecute 自动弹窗显示: 当data中的数据发生变化，页面重新渲染完后，会自动执行的函数updated')
            console.log(document.getElementById('app').innerHTML)
        },
        //那如何能看到这个umount效果那？这个需要在浏览器的控制台中输入销毁代码。app.unmount()
        beforeUnmount(){
            alert('autoExecute 自动弹窗显示: 当Vue应用失效时，会自动执行的函数beforeUnmount')
            console.log('autoExecute 自动弹窗显示: 当Vue应用失效时，会自动执行的函数beforeUnmount')
            console.log(document.getElementById('app').innerHTML)
        },
        unmounted(){
            alert('autoExecute 自动弹窗显示: 当Vue应用失效时，且DOM完全销毁之后，会自动执行unmounted')
            console.log('autoExecute 当Vue应用失效时，且DOM完全销毁之后，会自动执行unmounted')
            console.log(document.getElementById('app').innerHTML)
        },
        template:`

            <h2 v-on:click="manualExecute"> 手动点击：{{ message }} </h2>
            <hr />
            <button v-on:click="updateMessage">点我更新：{{ message }}</button>
        `

    }
    )
    //如果要测试成功beforeUnmount和unmounted必须要使用独立定义app的渲染方法,否则无反使用app.unmount()执行销毁
    var vm = app.mount("#app")
</script>
</html>